<script setup lang="tsx">
import { PropType, ref } from 'vue'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { Icon } from '@/components/Icon'
import { ElTag } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'

const { t } = useI18n()

defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => undefined
  }
})

const renderTag = (enable?: boolean) => {
  return (
    <ElTag type={!enable ? 'danger' : 'success'}>
      {enable ? t('common.enable') : t('common.disable')}
    </ElTag>
  )
}

const detailSchema = ref<DescriptionsSchema[]>([
  {
    field: 'type',
    label: t('menu.menuType'),
    slots: {
      default: (data) => {
        return <>{t(`menu.${data.type}`)}</>
      }
    }
  },
  {
    field: 'parentName',
    label: t('menu.parentMenu')
  },
  {
    field: 'title',
    label: t('menu.title')
  },
  {
    field: 'name',
    label: t('menu.menuName')
  },
  {
    field: 'component',
    label: t('menu.component'),
    slots: {
      default: (data) => {
        const { type, component } = data
        return <>{type === 'menu' ? component : '#'}</>
      }
    }
  },
  {
    field: 'icon',
    label: t('menu.icon'),
    slots: {
      default: (data) => {
        const icon = data.icon
        return <>{icon ? <Icon icon={icon} /> : '-'}</>
      }
    }
  },
  {
    field: 'path',
    label: t('menu.path')
  },
  {
    field: 'redirect',
    label: t('menu.redirect')
  },
  {
    field: 'sort',
    label: t('menu.sort')
  },
  {
    field: 'activeMenu',
    label: t('menu.activeMenu'),
    slots: {
      default: (data) => {
        return <>{data.activeMenu || '-'}</>
      }
    }
  },
  {
    field: 'createdAt',
    label: t('common.createTime')
  },
  {
    field: 'updatedAt',
    label: t('common.updateTime')
  },
  {
    field: 'status',
    label: t('menu.menuStatus'),
    slots: {
      default: (data) => {
        return renderTag(data.status)
      }
    }
  },
  {
    field: 'hidden',
    label: t('menu.hidden'),
    slots: {
      default: (data) => {
        return renderTag(data.hidden)
      }
    }
  },
  {
    field: 'alwaysShow',
    label: t('menu.alwaysShow'),
    slots: {
      default: (data) => {
        return renderTag(data.alwaysShow)
      }
    }
  },
  {
    field: 'noCache',
    label: t('menu.noCache'),
    slots: {
      default: (data) => {
        return renderTag(data.noCache)
      }
    }
  },
  {
    field: 'breadcrumb',
    label: t('menu.breadcrumb'),
    slots: {
      default: (data) => {
        return renderTag(data.breadcrumb)
      }
    }
  },
  {
    field: 'affix',
    label: t('menu.affix'),
    slots: {
      default: (data) => {
        return renderTag(data.affix)
      }
    }
  },
  {
    field: 'noTagsView',
    label: t('menu.noTagsView'),
    slots: {
      default: (data) => {
        return renderTag(data.noTagsView)
      }
    }
  },
  {
    field: 'canTo',
    label: t('menu.canTo'),
    slots: {
      default: (data) => {
        return renderTag(data.canTo)
      }
    }
  }
])
</script>

<template>
  <Descriptions :schema="detailSchema" :data="currentRow || {}" />
</template>
